{include file="public/header-static"/}
{include file="public/sidebar"/}


<div id="main">
    {include file="public/header"/}
    <main class="main-content">
        <div class="container">
            <div class="page-header">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="#">首页</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">会员设置  </li>
                    </ol>
                </nav>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <form action="{:url('/systemsett/memberLevelAdd')}" method="post" target="iframe_form" enctype="multipart/form-data" >

                                <div class="form-group row">
                                    <label for="" class="col-sm-1 col-form-label">会员级别</label>
                                    <div class="col-sm-8">
                                        <input type="text" name="level"  class="form-control"\ placeholder="会员级别">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="" class="col-sm-1 col-form-label">会员单位</label>
                                    <div class="col-sm-8">
                                        <input type="text" name="unit"  class="form-control" placeholder="会员单位（年/季/月）">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="" class="col-sm-1 col-form-label">会员价格</label>
                                    <div class="col-sm-8">
                                        <input type="text" name="price"  class="form-control"  placeholder="会员价格">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="" class="col-sm-1 col-form-label">会员期限</label>
                                    <div class="col-sm-8">
                                        <input type="text" name="validity"  class="form-control"  placeholder="会员期限">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-1 col-form-label">背景图</label>
                                    <div class="col-sm-2">
                                        <input type="hidden" class="form-control images" name="images" required="" aria-required="true">
                                        <button type="button" class="btn btn-secondary" id="images">上传背景图</button>
                                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                            预览图：
                                            <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-images">
                                            </div>
                                        </blockquote>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="" class="col-sm-1 col-form-label">排序</label>
                                    <div class="col-sm-8">
                                        <input type="text" name="sort"  class="form-control"  placeholder="排序">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-1 col-form-label">会员特权</label>
                                    <div class="col-sm-8">
                                        <textarea id="custom_text" placeholder="会员特权（多段文字使用 | 分隔）"  name="privilege" rows="5" cols="91"></textarea>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="" class="col-sm-1 col-form-label">操作</label>
                                    <div class="col-sm-5">
                                        <div class="custom-control custom-switch custom-checkbox-secondary custom-control-inline">
                                            <input checked name="status" type="checkbox"  class="custom-control-input" id="customSwitchInline2">
                                            <label class="custom-control-label" for="customSwitchInline2">状态[是否展示]</label>
                                        </div>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-secondary">提交</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </main>

    {include file="public/footer"/}

    <script>

        // 上传
        layui.use('upload', function() {
            var $ = layui.jquery
                , upload = layui.upload;
            // 群二维码上传
            upload.render({
                elem: '#images'
                , url: '{:url("/console/imageReturn")}?path=homeMemberBg'
                , before: function (obj) {
                    layer.msg('背景图上传中...', {
                        icon: 16,
                        shade: 0.05,
                        time: 0
                    });
                }
                , done: function (res) {
                    layer.close(layer.msg());//关闭上传提示窗口
                    // console.log(res)
                    //上传完毕
                    var images = $('.images').val();
                    if (images != '') {
                        delImageOrVideo(images);
                        $('#uploader-images').children('.file-iteme').remove();
                    }
                    $('.images').val(res.data.src);
                    $('#uploader-images').append(
                        '<div id="" class="file-iteme">' +
                        '<div class="handle" src="' + res.data.src + '"><span class="fa fa-times" style="border-radius: 0.375rem 0.375rem 0 0;"></span></div>' +
                        '<img style="width: 5rem;height: 5rem;border-radius: 0.375rem;" src=' + res.data.src + '>' +
                        // '<div class="info">' + res.data.name + '</div>' +
                        '</div>'
                    );
                }
            });
        });

        // 删除本地图片
        function delImageOrVideo(path) {
            $.post('{:url("/console/delImageOrVideo")}', {path:path} ,function (res) {
                console.log(res)
            });
        }

        // 图片显示删除
        $(document).on("mouseenter mouseleave", ".file-iteme", function(event){
            if(event.type === "mouseenter"){
                //鼠标悬浮
                $(this).children(".info").fadeIn("fast");
                $(this).children(".handle").fadeIn("fast");
            }else if(event.type === "mouseleave") {
                //鼠标离开
                $(this).children(".info").hide();
                $(this).children(".handle").hide();
            }
        });

        // 删除图片
        $(document).on("click", ".file-iteme .handle", function(event){
            console.log($(this).attr('src'))
            delImageOrVideo($(this).attr('src'));
            $(this).parent().remove();
        });

    </script>

</div>